<template>
	<view class="content">
		<image mode="widthFix" :src="info.imgpath" class="content_banner"></image>
		<view class="content_nav">
			<view v-for="(v,k) in navList" :key="k" :class="['item',indexNav==k?'is':'']" @click="setNav(k)">{{v}}</view>
		</view>
		<view v-if="indexNav==0" class="content_box">
			<view class="newsTop">
				<view class="text">时间：{{info.startdate}}至{{info.enddate}}</view>
				<view class="text">地点：{{info.place}}</view>
				<view class="text">详细地址：{{info.address}}</view>
			</view>
			<view class="content_box_news" v-html="formatRichText(info.content)"></view>
		</view>
		<view v-if="indexNav==1" class="content_box box2">
			<view class="title">参展单位</view>
			<view class="list">
				<image mode="aspectFit" v-for="(v,k) in info.canzhandanwei" :key="k" :src="v"></image>
			</view>
		</view>
		<view v-if="indexNav==2" class="content_box box3">
			<view class="title">会议议题</view>
			<view class="list">
				<view class="item" v-for="(v,k) in info.zhanhuiyiti" :key="k">
					<view class="sum">{{k+1}}</view>
					<view class="text overflow1">{{v}}</view>
				</view>
			</view>
		</view>
		<view v-if="indexNav==3" class="content_box box4">
			<view class="title">参会须知</view>
			<view class="ftitle">时间地点</view>
			<view class="text" v-html="info.shijiandidian"></view>
			<view class="ftitle">交通</view>
			<view class="text" v-html="info.jiaotong"></view>
			<view class="ftitle">汇款账号</view>
			<view class="text" v-html="info.huikuanzhanghao"></view>
			<view class="ftitle">参会费用</view>
			<view class="text" v-html="info.canhuifeiyong"></view>
			<view class="ftitle">联系方式</view>
			<view class="text" v-html="info.lianxifangshi"></view>
			<view class="ftitle">媒体合作</view>
			<view class="text" v-html="info.meitihezuo"></view>
		</view>
		<view class="content_bottom">
			<view class="content_bottom_box">
				<view class="button" @click="link('/news/baoming/baoming?id='+id)">
					我要报名
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		homeApi
	} from "@/api/index"
	import {link,formatRichText} from '@/utils/utils.js'
	const navList = ref(['基本信息','会议详情','会议议程','会议须知'])
	const indexNav = ref(0)
	const setNav = (index)=>{
		indexNav.value = index
	}
	const id = ref('')
	onLoad((open)=>{
		id.value = open.id
		getInfo()
	})
	const info = ref({})
	const getInfo = async()=>{
		let data = {
			do:'txlzhanhuixiangqing',
			exhid:id.value
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlzhanhuixiangqing') {
				info.value = res.columns[i]
			}
		}
		uni.setNavigationBarTitle({
			title: info.value.title
		})
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		&_banner{
			width: 100%;
			display:block;
		}
		&_nav{
			width: 100%;
			height: 100rpx;
			background: #fff;
			box-shadow: 0 0 5rpx 0 rgba(0,0,0,.2);
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item{
				flex: 1;
				height: calc(100% - 1px);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				border-bottom: 1px solid #fff;
			}
			.item.is{
				color: #e94f06;
				border-bottom: 1px solid #e94f06;
			}
		}
		&_box{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			.newsTop{
				font-size: 30rpx;
				line-height: 50rpx;
			}
			&_news{
				margin-top: 30rpx;
			}
		}
		&_box.box2{
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				width: 250rpx;
				height: 60rpx;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f2f2f2;
				font-size: 32rpx;
			}
			.list{
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				image{
					width: calc(33.33% - 20rpx);
					height: 100rpx;
					margin-top: 20rpx;
				}
			}
		}
		&_box.box3{
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				width: 250rpx;
				height: 60rpx;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f2f2f2;
				font-size: 32rpx;
			}
			.list{
				width: 100%;
				margin-top: 60rpx;
				display: flex;
				flex-direction: column;
				.item{
					width: 100%;
					display: flex;
					align-items: center;
					background: #e98a37;
					margin-bottom: 20rpx;
					.sum{
						width: 80rpx;
						height: 80rpx;
						font-size: 36rpx;
						color: #fff;
						font-weight: bold;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #e94f06;
					}
					.text{
						width: calc(100% - 120rpx);
						padding: 20rpx;
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
		}
		&_box.box4{
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				width: 250rpx;
				height: 60rpx;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f2f2f2;
				font-size: 32rpx;
			}
			.ftitle{
				width: 100%;
				font-size: 36rpx;
				color: #e94f06;
				font-weight: bold;
				margin-top: 40rpx;
			}
			.text{
				width: 100%;
				margin-top: 20rpx;
			}
		}
		&_bottom{
			width: 100%;
			height: 120rpx;
			&_box{
				width: 100%;
				height: 120rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.button{
					width: calc(100% - 60rpx);
					height: 80rpx;
					background: #e94f06;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 32rpx;
				}
			}
		}
	}
</style>